<template>
  <div>
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 1 }">
      <a-card :bordered="false">
        <a-row :gutter="24">
          <a-col :lg="10" :md="16" :sm="24">
            <a-input v-model="problem" placeholder="请输入您的问题" @change="proChange" />
          </a-col>
          <a-col :lg="2" :md="4" :sm="6">
            <a-button type="primary" @click="dosearch">搜索答案</a-button>
          </a-col>
          <a-col :lg="2" :md="4" :sm="6">
            <a-popconfirm placement="bottom" okText="提交" cancelText="取消" @confirm="myQuiz">
              <template slot="title">
                <p>确认提交吗?</p>
              </template>
              <a-button>我要提问</a-button>
            </a-popconfirm>
          </a-col>
        </a-row>
      </a-card>
    </a-skeleton>
    <a-card style="margin-top:20px" title="问题列表" :bordered="false">
      <div slot="extra">
        <a-select style="width:200px" defaultValue="all" @change="selChange">
          <a-select-option value="all">所有问题</a-select-option>
          <a-select-option value="myQ">我提问的</a-select-option>
          <a-select-option value="myA">我回答的</a-select-option>
        </a-select>
      </div>
      <a-table
        :loading="loading"
        :columns="columns"
        :dataSource="proList"
        :rowKey="proList => proList.id"
        :pagination="false">
        <div class="textnone" slot="problem" slot-scope="text,row">
          <a @click="goAnswer(row.id)">{{ text }}</a>
        </div>
        <div slot="id" slot-scope="text,row">
          <a-popconfirm placement="top" okText="确认" cancelText="取消" @confirm="delCon(row.id)">
            <template slot="title">
              <p>确认删除吗</p>
            </template>
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {
  doSearch,
  getKnowList,
  putQuestions,
  adminDel
} from '@/api/user/knowledge'
const columns = [{
  title: '序号',
  // dataIndex: 'index'
  customRender: (text, row, index) => {
    return index + 1
  }
},
{
  title: '问题',
  dataIndex: 'problem',
  scopedSlots: {
    customRender: 'problem'
  }
},
{
  title: '用户',
  dataIndex: 'user'
},
{
  title: '提问时间',
  dataIndex: 'time'
},
{
  title: '浏览量',
  dataIndex: 'pageview'
},
{
  title: '回答数',
  dataIndex: 'answer'
},
{
  title: ' 操作',
  dataIndex: 'id',
  scopedSlots: {
    customRender: 'id'
  }
}
]

export default {
  name: 'Repository',
  data () {
    return {
      problem: '',
      loading: false,
      skeLoading: true,
      columns,
      type: 'all',
      proList: [
        // {
        //   id: 1,
        //   problem: '为什么',
        //   user: '嘿嘿',
        //   time: '2020-4-9',
        //   pageview: 12,
        //   answer: 12
        // }
      ]
    }
  },

  computed: {

  },
  created () {
    this.getKnowList(this.type, 9999)
  },
  mounted () {

  },
  methods: {
    delCon (id) {
      adminDel({
        qId: id
      }).then(res => {
        this.$message.info('删除成功!')
        //console.log(res)
        this.getKnowList(this.type, 9999)
      }).catch(err => {
        this.$message.info('删除失败!')
        console.log(err)
      })
    },
    // 获取知识库列表
    getKnowList (val, num) {
      this.loading = true
      getKnowList({
        type: val,
        pageSize: num
      }).then(res => {
        this.skeLoading = false
        //console.log(res)
        this.proList = res.result.data.map(function (obj) {
          var rObj = {}
          rObj.id = obj.id
          rObj.problem = obj.q
          rObj.user = obj.q_user
          rObj.time = obj.q_time
          rObj.pageview = obj.view_num
          rObj.answer = obj.a_num
          return rObj
        })
        this.loading = false
        // console.log('data', this.data)
      }).catch(err => {
        console.log(err)
        this.loading = false
        this.skeLoading = false
      })
    },
    // 搜索/
    dosearch () {
      if (this.problem !== '') {
        //console.log('搜索')
        doSearch({
          title: this.problem,
          pageSize: 5
        }).then(res => {
          //console.log(res)
          this.proList = res.result.data.map(function (obj) {
            var rObj = {}
            rObj.id = obj.id
            rObj.problem = obj.q
            rObj.user = obj.q_user
            rObj.time = obj.q_time
            rObj.pageview = obj.view_num
            rObj.answer = obj.a_num
            return rObj
          })
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message.info('请填写问题!')
      }
    },
    // 我要提问
    myQuiz () {
      if (this.problem !== '') {
        //console.log('确认提交')
        putQuestions({
          q: this.problem
        }).then(res => {
          //console.log(res)
          this.getKnowList(this.type, 7)
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message.info('请填写问题!')
      }
    },
    goAnswer (val) {
      // console.log(val)
      this.$router.push({
        // name: 'passGoods',
        path: `/admin/repository/answer-detil`,
        query: {
          id: val
        }
      })
    },
    selChange (val) {
      // console.log(val)
      this.type = val
      this.getKnowList(this.type, 7)
    },
    proChange (val) {
      // console.log(val)
    }
  }
}
</script>

<style lang='less' scoped>
  .repository {
    .searchBox {
      width: 740px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .textnone {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
</style>
